<template>
    <div>
        <el-table 
            ref="orderTable"
            :data="orders" 
            style="width: 100%" 
            header-cell-class-name="table_header"
            v-loading="loading" 
            :cell-style="tableRowClassName" 
            show-summary
            stripe
            border
            @sort-change="onSortChange">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <order-expand-detail :order="props.row" />
                </template>
            </el-table-column>
            
            <el-table-column prop="shopify_order_number" label="Order No." align="center" width="120">
                <template v-slot="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.shopify_order_number" placement="top-start">
                        <div class="ellipsis">{{ row.shopify_order_number }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="username" label="Username" align="center" width="120">
                <template v-slot="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.username" placement="top-start">
                        <div class="ellipsis">{{ row.username }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="pay_amount" label="Amount" align="center" width="100" sortable="custom">
                <template v-slot="{ row }">
                    <span>${{ row.pay_amount }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="pay_status" label="Status" align="center" width="100">
                <template v-slot="{ row }">
                    <el-tag :type="row.pay_status === 1 ? 'success' : 'danger'" size="small">
                        {{ payStatusMap[row.pay_status] }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="created_at" label="Created" align="center" width="120" sortable="custom">
                <template v-slot="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.created_at" placement="top-start">
                        <div class="ellipsis">{{ row.created_at.split(' ')[0] }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="expired_at" label="Expires" align="center" width="120" sortable="custom">
                <template v-slot="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.expired_at" placement="top-start">
                        <div class="ellipsis">{{ row.expired_at.split(' ')[0] }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column prop="reset_time" label="Reset Time" align="center" width="120">
                <template v-slot="{ row }">
                    <el-tooltip class="item" effect="dark" :content="row.reset_time" placement="top-start">
                        <div class="ellipsis">{{ row.reset_time }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column label="Operations" align="center" width="150">
                <template v-slot="{ row, $index }">
                    <el-dropdown @command="(command) => handleCommand(command, row, $index)">
                        <el-button type="primary" size="small">
                            Actions<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit">Edit</el-dropdown-item>
                            <el-dropdown-item command="delete">Delete</el-dropdown-item>
                            <el-dropdown-item command="reset">Reset Password</el-dropdown-item>
                            <el-dropdown-item command="copy">Copy Info</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <div class="total-orders">Total Orders: {{ total }}</div>
            <el-pagination 
                background 
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="currentPage"
                @current-change="onPageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import OrderExpandDetail from './OrderExpandDetail.vue'

export default {
    name: 'OrderTable',
    components: {
        OrderExpandDetail
    },
    props: {
        orders: {
            type: Array,
            required: true
        },
        loading: {
            type: Boolean,
            default: false
        },
        total: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            currentPage: 1,
            payStatusMap: {
                0: 'Unpaid',
                1: 'Paid'
            }
        }
    },
    methods: {
        tableRowClassName({ row }) {
            return row.pay_status === 0 ? { color: '#F56C6C' } : {}
        },
        handleCommand(command, row, index) {
            this.$emit('action', { command, row, index })
        },
        onSortChange(sort) {
            this.$emit('sort-change', sort)
        },
        onPageChange(page) {
            this.$emit('page-change', page)
        }
    }
}
</script>

<style scoped>
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.total-orders {
    font-size: 14px;
    color: #606266;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:deep(.table_header) {
    background: #f5f7fa !important;
    color: #606266;
    font-weight: bold;
}
</style>
